<template>
  <div class="address-page">
    <div class="nav-bar">
      <van-nav-bar title="选择收货地址" left-text="" right-text="新增" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </div>
    <div class="address-box">
      <div class="address-title">
      </div>
      <div class="address-list">
        <van-address-list ref="address_list" v-model="chosenAddressId" :list="list" @select="onSelect" @add="onAdd" @edit="onEdit" />
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'

import store from '@/store/store'
import { mapState, mapMutations } from 'vuex'

import { NavBar, AddressList, Toast } from 'vant'

import { CODE, APIURI } from '#/common/js/apiConst'

Vue.use(NavBar).use(AddressList)

export default {
  store,
  data() {
    return {
      chosenAddressId: '1',
      list: []
    }
  },
  created() {
    this.getAddressList()
  },
  mounted() {
    this.changeCSS()
  },
  computed: {
    ...mapState(['street', 'address'])
  },
  methods: {
    ...mapMutations(['setStreet', 'setAddress']),
    onAdd() {
      this.addAddress()
    },
    onEdit(item) {
      this.routeParam('/user/editaddress?id=' + item.id)
    },
    onSelect(item, index) {
      let param = JSON.parse(JSON.stringify(item))
      param = this.returnForm(param)
      param.stats = '1'
      param = this.serializeParam(param)
      this.$axios
        .post(APIURI + '/address/edit', param, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        .then(res => {
          res = res.data
          if (res.code === CODE) {
            // console.log(res)
          }
        })
        .catch(function(err) {
          console.log(err)
        })
      this.setStreet(item.street)
      this.setAddress(item)
      let source = this.$route.query.source
      if (source !== 'usercenter') {
        this.$router.push({
          path: '/' + source
        })
      }
    },
    onClickLeft() {
      this.routeReturn()
    },
    onClickRight() {
      this.addAddress()
    },
    addAddress() {
      if (this.list.length < 8) {
        this.routeParam('/user/addaddress')
      } else {
        Toast('最多可以添加八条地址哦')
      }
    },
    getAddressList() {
      this.$axios
        .get(APIURI + '/address/0')
        .then(res => {
          res = res.data
          if (res.code === CODE) {
            let addressList = res.data.list
            this.list = this.changeForm(addressList)
            this.list.filter(item => {
              if (item.stats === '1') {
                this.chosenAddressId = item.id
              }
            })
          }
        })
        .catch(function(err) {
          console.log(err)
        })
    },
    changeCSS() {
      var addressList = this.$refs.address_list.$el
      addressList.getElementsByClassName(
        'van-address-list__add'
      )[0].style.position =
        'fixed'
      addressList.getElementsByClassName(
        'van-address-list__group'
      )[0].style.padding =
        '10px 0'
    },
    changeForm(addressList) {
      for (let i = 0, len = addressList.length; i < len; i++) {
        addressList[i].tel = addressList[i].mobile
        addressList[i].street = addressList[i].address
        addressList[i].address = addressList[i].area + addressList[i].street

        delete addressList[i].mobile
      }
      return addressList
    },
    returnForm(addressItem) {
      addressItem.mobile = addressItem.tel
      addressItem.address = addressItem.street

      delete addressItem.tel
      delete addressItem.street

      return addressItem
    },
    serializeParam(param) {
      let serialize = ''
      for (let key in param) {
        serialize += key + '=' + param[key] + '&'
      }
      serialize = serialize.substr(0, serialize.length - 1)
      return serialize
    },
    routeReturn() {
      let source = this.$route.query.source
      if (source !== 'usercenter') {
        this.$router.push({
          path: '/' + source
        })
      } else {
        this.$router.push({
          path: '/user'
        })
      }
    },
    routeParam(url) {
      let source = this.$route.query.source
      if (source) {
        if (url.indexOf('?') !== -1) {
          this.$router.push({
            path: url + '&source=' + source
          })
        } else {
          this.$router.push({
            path: url + '?source=' + source
          })
        }
      } else {
        this.$router.push({
          path: url
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common/scss/common.scss';
.address-page {
  width: 100%;
  min-height: 100vh;
  background-color: $white;
  .address-box {
    [class*='van-hairline'] {
      position: fixed;
    }
    .van-address-list__group {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>